<template>
  <div class="list">
    <div class="top">
      <div class="playAll">
        <i class="iconfont icon-playcircle"></i>
        <span>播放全部</span>
      </div>
      <el-button size="mini" class="iconfont icon-folder-add"> 收藏全部</el-button>
    </div>
    <el-table :data="newSongslist" style="width: 100%" stripe fit :lazy="true" @row-dblclick="playMuaic">
      <el-table-column type="index" style="text-align: center;">
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <div class="left">
            <div class="img">
              <img :src="scope.row.album.picUrl" />
              <i class="iconfont icon-playcircle"></i>
            </div>
            <span class="name">{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <span class="nickname">{{ scope.row.artists[0].name }}</span>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <span class="name">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column width="80">
        <template slot-scope="scope">
          <span class="time" v-if="scope.row.lMusic !== null">{{ scope.row.lMusic.playTime | showTime }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getNewSongList } from '../../../network/playlist.js'
import { getMusicUrl, getMusicMenu } from '../../../network/swiper.js'
import { timeFormat } from '../../common/util.js'
export default {
  props: ['area'],
  data () {
    return {
      limit: 100,
      offset: 0,
      newSongslist: [],
      musiclistIds: [],
      num: 0
    }
  },
  methods: {
    getNewSongList (area) {
      getNewSongList(area).then(res => {
        // console.log(res.data)
        this.newSongslist = res.data.data
        this.newSongslist.forEach(item => {
          item.num = this.num++
          this.musiclistIds.push(item.id)
        })
      }, err => {
        console.log(err)
      })
    },
    // 播放音乐
    playMuaic (row) {
      // console.log(row)
      if (row.id === null) return
      this.getMusicUrl(row.id)
      this.getMusicMenu(row.id)
      this.$store.commit('musicListIds', this.musiclistIds)
      this.$store.commit('musicIndex', row.num)
      this.$store.commit('setMusicCount', this.musiclistIds.length)
    },
    getMusicUrl (id) {
      getMusicUrl(id).then(res => {
        // console.log(res.data.data[0].url)
        this.$store.commit('getNowMusic', res.data.data[0].url)
      })
    },
    getMusicMenu (id) {
      getMusicMenu(id).then(res => {
        // console.log(res.data.songs[0])
        this.$store.commit('getnowMusicMenu', res.data.songs[0])
      })
    }
  },
  computed: {
    ...mapGetters(['getMusicListIds', 'getMusicCount'])
  },
  created () {
    this.getNewSongList(this.area)
  },
  filters: {
    showTime: function (value) {
      return timeFormat(value)
    }
  }
}
</script>

<style lang="less" scoped>
  .list {
    width: 100%;
    margin: auto;
    border: 1px solid #ededed;
    box-sizing: border-box;
    .top {
      // width: 100%;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      .playAll {
        display: flex;
        align-items: center;
        i {
          font-size: 25px;
          color: #de0000;
          margin-right: 10px;
        }
        .el-button {
          padding-right: 10px;
        }
      }
    }
    .left {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      .img {
        width: 50px;
        height: 50px;
        margin-right: 20px;
        position: relative;
        img {
          width: 100%;
        }
        i {
          position: absolute;
          top: 50%;
          left: 50%;
          font-size: 25px;
          color: #fff;
          background: rgba(0, 0, 0, 0.3);
          border-radius: 50%;
          transform: translate(-50%, -50%);
        }
        i:hover {
          background: rgba(0, 0, 0, 0.5);
        }
      }
    }
  }
</style>
